
<template>
	<view class="body">
		<xk-header title="维修记录"></xk-header>
		<view class="list" >
			<view class="list-item header" @click="orderMore = !orderMore">
				<view>报修单号:  {{data.apply_no}}</view>
				<image v-if="!orderMore" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view v-if="orderMore" class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">报修人：</view>{{data.apply_user || '暂无'}}</view>
					<view class="info-item"><view class="key">业主单位：</view>{{data.apply_company_name || '暂无'}}</view>
					<view class="info-item"><view class="key">物业编号：</view>{{data.property_code || '暂无'}}</view>
					<view class="info-item"><view class="key">报修设施：</view>{{data.buliding_no + data.storey_no + (data.repair_Address||"")}}</view>
					<view class="info-item"><view class="key">预约上门时间：</view>{{data.plan_date || '暂无'}}</view>
					<view class="info-item"><view class="key">报修描述：</view><text>{{data.repair_content || '暂无'}}</text></view>
					<!-- <view class="info-item error"><view class="key">异常记录：</view>墙壁表层脱落</view> -->
					<view v-if="data.repair_image" class="info-item"><view class="key"></view>
						<image-list :pics="data.repair_image"></image-list>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item header">
				<view>维修记录</view>
			</view>
			<view>
				<view class="list-item">
					<view>维修单号：{{data.apply_no}}</view>
				</view>
				<view class="list-item">
					<view>接单人：{{data.receiver}}</view>
				</view>
				<!-- <picker :range="types" :value="typeIndex === -1 ? 0 : typeIndex" range-key="type_name"
					@change="typeChange"> -->
				<uni-data-picker placeholder="请选择维修类型" popup-title="维修类型" :localdata="types"
							@change="typeChange">
					<view class="list-item">
						<view>维修类型<text class="com-req"></text>:</view>
						<view :class="formInfo.repair_type_id ? 'right-title1' : 'right-title1 right-title1-empty'">{{formInfo.repair_type_id ? typeMap[formInfo.repair_type_id] : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</uni-data-picker>

				<!-- <w-picker
					:visible.sync="linkageVisible"
					mode="linkage"
					:value="typeValue"
					:options="types"
					:level="4"
					default-type="id"
					@confirm="typeChange($event,'linkage')"
					ref="linkage"
				></w-picker> -->
				<!-- </picker> -->

				<!-- <biaofun-datetime-picker :defaultValue="defaultDate"
					start="2000-02-03 00:00"
					end="2200-10-28 23:59"
					fields="minute"
					@change="dealTimeChange"
				>
					<view class="list-item">
						<view>完成时间<text class="com-req"></text>：</view>
						<view :class="formInfo.finish_time ? 'right-title1' : 'right-title1 right-title1-empty'">{{formInfo.finish_time ? formInfo.finish_time : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</biaofun-datetime-picker> -->
				<picker mode="date" :value="formInfo.start_time" @change="dealTimeChange">
					<view class="list-item">
						<view>开始时间<text class="com-req"></text>：</view>
						<view :class="formInfo.finish_time ? 'right-title1' : 'right-title1 right-title1-empty'">
							{{ formInfo.finish_time ? formInfo.finish_time : "请选择" }}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
					</view>
				</picker>
				<view @click="editMate" class="list-item">
					<view>物料领用：</view>
					<view v-if="formInfo.materials.length > 0" class="right-title1" style="color: #2C72FF;">已添加{{formInfo.materials.length}}种物料</view>
					<view v-else class="right-title1" style="color: #2C72FF;">查看明细</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
				</view>
				<view class="list-item">
					<view>工作时长(小时)<text class="com-req"></text>：</view>
					<input class="input-item" type="number" v-model="formInfo.work_time" placeholder="请输入工作时长" placeholder-class="placeholder"/>
				</view>
				<!-- <picker :range="chanceArray" range-key="label" :value="formData.is_intention" @change="chanceChange">
					<view class="list-item">
						<view>是否需要支付费用<text class="com-req"></text>：</view>
						<view class="right-title1">{{chanceArray[formData.is_intention].label}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</picker> -->
				<view class="list-item">
					<view>结算金额(元)：</view>
					<input class="input-item" type="number" v-model="formInfo.repair_money" placeholder="请输入结算金额" placeholder-class="placeholder"/>
				</view>
				<picker :range="players" :value="playerIndex === -1 ? 0 : playerIndex" range-key="data_text"
					@change="playerChange">
					<view class="list-item">
						<view>支付方<text v-if="formInfo.repair_money > 0" class="com-req"></text>:</view>
						<view :class="playerIndex !== -1 ? 'right-title1' : 'right-title1 right-title1-empty'">{{playerIndex !== -1 ? players[playerIndex].data_text : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</picker>
				<view class="list-item textarea">
					<view>维修描述：</view>
					<textarea v-model="formInfo.record_remark" placeholder="在此输入维修描述" placeholder-class="placeholder"/>
				</view>
			</view>
		</view>
		<view class="upload-img-item">
			<view class="title">上传维修照片</view>
			<upload-image :images="formInfo.repair_image" @onChange="uploadImageChange"/>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="doneRepair">提交</view>
		</view>
		<view class="common-zw"></view>


	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				data: {},
				orderMore: true,
				typeIndex: -1,
				types:[],
				playerIndex: -1,
				players:[],
				repairDate: '',
				repairTime: '',
				linkageVisible: false,
				typeValue: ['', '', '', ''],
				// chanceArray:[{value: 0, label: '否'}, {value: 1, label: '是'}],
				typeMap: {},
				defaultDate: moment().format('YYYY-MM-DD HH:mm'),
				formInfo: {
				    repair_id: "",	// 服务报修申请id
				    repair_type_id: "",	// 维修种类id
				    finish_time: "",
				    work_time: "",	//
				    repair_money: "",
				    payer: "",
				    record_image: "",
				    record_remark: "",
				    isSubmit: true,
				    materials: []
				},
				notNull: {
					repair_id: "无法找到报修单号",
					repair_type_id: "请选择维修类型",
					finish_time: "请选择完成日期",
					work_time: "请输入工作时长",
					record_image: "请上传维修图片"
					// repair_money: "请输入结算金额",
					// payer: "请选择支付方",
					// record_remark: "请输入维修描述"
				}
			};
		},
		onLoad(options) {
			this.formInfo.repair_id = options.repairId;
			this.getServiceRepairData()
			this.initInfo()
		},
		onUnload(){
			uni.$off('getMateInfo')
		},
		methods:{
			// chanceChange(e){
			// 	this.formData.is_intention = e.detail.value
			// },
			getServiceRepairData(){
				this.$api.baseData_getPmServiceRepair(this.formInfo.repair_id).then((res)=>{
					this.data = res.pmServiceRepair
				})
			},
			initInfo() {
				this.$api.baseData_getToolDataList({
					code: "PM_SERVICE_REPAIR_PAYER" + "_nostr"
				}).then(res => {
					console.warn("支付方: ", res)
					this.players = res
				})
				let types = [[],[],[],[]]
				let typeMap = {}
				this.$api.baseData_getBaseRepairType().then(res => {
					for (let item of res) {
						typeMap[item.type_id] = item.type_name
						if(item.type_level){
							types[item.type_level - 1].push(item)
						}else{
							types[item.type_id.length / 4 - 1].push(item)
						}
					}
					let tt = this.initTypes(types, '', 1)
					this.types = tt
					this.typeMap = typeMap
				})
			},
			initTypes(list, pid, level){
				let child = []
				for(let item of list[level - 1]){
					if (item.type_level > 3) continue	// 最多只能三级菜单
					if(item.type_id.startsWith(pid)){
						let cc = []
						if(level < 4){
							cc = this.initTypes(list, item.type_id, level + 1)
						}
						child.push({
							value: item.type_id,
							text: item.type_name,
							children: cc
						})
					}
				}
				// if(child.length == 0 && level <= 4){
				// 	let c = Object.assign({}, pnode);
				// 	let b = null;
				// 	for(let i = level; i <= 4; i++){
				// 		b = Object.assign({}, pnode)
				// 		b.children = [c]
				// 		c = b
				// 	}
				// 	child.push(b)
				// 	console.log('tdkekek', level, b)
				// }
				return  child
			},
			typeChange(res) {
				this.formInfo.repair_type_id = res[res.length - 1]
			},
			// dateChange(e){
			// 	this.repairDate = e.detail.value
			// },
			// timeChange(e){
			// 	this.repairTime = e.detail.value
			// },
			dealTimeChange(e){
				this.formInfo.finish_time = moment(e.dt).format('YYYY-MM-DD HH:mm')
			},
			playerChange(e){
				this.playerIndex = e.detail.value;
				this.formInfo.payer = this.players[this.playerIndex].data_value
			},
			uploadImageChange(images) {
				console.warn("图片列表：", images)
				this.formInfo.record_image = images
			},
			editMate(){
				uni.$off('getMateInfo')
				uni.$on('getMateInfo', (res)=>{
					this.formInfo.materials = res
					console.log('金额',res)
					let totalMoney = 0
					res.forEach(item=>{
						totalMoney += parseFloat(item.total)
					})
					console.log('测试数据',totalMoney)
					this.formInfo.repair_money =totalMoney
				});
				uni.navigateTo({
					url: '/pagesA/facility-repair/facility-repair-material?mateList=' + JSON.stringify(this.formInfo.materials)
				})
			},
			doneRepair(){
				console.warn("formInfo: ", this.formInfo)
				console.log('图片',this.formInfo.record_image)
				// if (this.repairDate && this.repairTime) {
				// 	this.formInfo.finish_time = this.repairDate + " " + this.repairTime
				// }
				for (let item in this.notNull) {
					if (!this.formInfo[item]) {
						this.$util.toast(this.notNull[item]);
						return;
					}
				}
				if(this.formInfo.materials.length === 0){
					this.$util.toast('物料引用不能为空');
					return
				}
				if(this.formInfo.repair_money > 0 ){
					if(!this.formInfo.payer){
						this.$util.toast('费用支付方不能为空');
						return;
					}
				}
				if(this.formInfo.record_image===';' || this.formInfo.record_image === ''){
					this.$util.toast('请上传维修图片');
					return;
				}
	
				
				this.$util.confirm({
					content: "确定提交完成维修？",
					confirmText: "完成维修"
				}).then(isConfirm => {
					if (isConfirm) {
						this.$util.post({
							url: "app/pmServiceRepair/register",
							data: {
								...this.formInfo,
								work_time: parseInt(this.formInfo.work_time),
								repair_money: parseInt(this.formInfo.repair_money || '0')
							}
						}).then(res => {
							uni.$emit('refreshHomeDataList')
							uni.$emit('refreshServiceRepair')
							uni.redirectTo({
								url: '/pagesA/facility-repair/facility-repair-finish?type=done'
							})
						})

					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		> view:first-child {
			color: #333333;
		}
		.input-item {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			margin-left: 20rpx;
		}
		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.right-title1-empty {
			color: #ccc;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.textarea{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		textarea{
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			height: 130rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.list-item2{
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;
		:first-child {
			width: 150rpx;
		}
	}
	.header{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		:first-child {
			flex: 1;
			color: #333333;
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.upload-img-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #FFFFFF;
	margin: 20rpx 30rpx;
	padding: 30rpx 20rpx;
	.add-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}
	.del-img {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		width: 30rpx;
		height: 30rpx;
	}
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		font-weight: bolder;
		color: #333333;
		.right-title{
			display: flex;
			font-size: 28rpx;
			font-weight: normal;
			color: #999999;
		}
	}
	.sub-title{
		font-size: 24rpx;
		color: #999999;
	}
	.add-img-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #FFFFFF !important;
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
		.add-img-view-item {
			margin-right: 30rpx;
			position: relative;
			.add-item{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
}
.data-item{
	// display: flex;
	// margin-bottom: 30rpx;
	padding: 0 20rpx 20rpx;
	.order-type{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		text{
			font-weight: bolder;
		}
	}
	.order-info{
		margin: 20rpx 0;
		.info-item{
			display: flex;
			font-size: 28rpx;
			align-items: center;
			color: #333333;
			line-height: 50rpx;
			.key{
				min-width: 150rpx;
				font-size: 28rpx;
				color: #999999;
			}
			.not-null {
				margin: 10rpx 0rpx;
				color: #59A0FF;
			}
			.date {
				flex: 1;
			}
			.info-imgs{
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 10rpx;
				.img-item{
					width: 120rpx;
					height: 120rpx;
					margin: 2rpx 2rpx 0 0;
				}
			}
		}
		.error{
			color: #FF3737;
		}
	}
}
</style>
